<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
        title: {
            text: "近俩年用电对比",
            x: "center", //标题x坐标
            y: "425", // 标题y坐标
            textStyle: {
                color: "#fff", //标题字体颜色
                fontSize: "15", //标题颜色
            },
        },
        grid: {
            height: 320,
        },

        tooltip: {
            trigger: "axis",
        },
        legend: {
            // top: "bottom",
            data: ["2021-用电", "2022-用电", "2021-同比", "2022-环比"],
            x: "center", //可设定图例在左、右、居中
            y: "460",
            data:[
                {name:'2021-用电',icon: "rect"},
                {name:'2022-用电',icon: "rect"},
                {name:'2021-同比',icon: "circle"},
                {name:'2022-环比',icon: "circle"},
            ],
            textStyle: {
                color: "#fff",
                fontSize: "12",
            },
        },
        calculable: true,
        xAxis: [
            {
                type: "category",
                // prettier-ignore
                data: ['仓库', '钢筋厂', '拌合站', '碎石场', '拌合站', '炸药库', '其他',],
            },
        ],
        yAxis: [
            {
                type: "value",
                min: 0,
                max: 10,
                interval: 2,
                axisLabel: {
                    formatter: "{value} W",
                },

                // 背景线
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        // 使用深浅的间隔色
                        color: ["#383647"],
                    },
                },
            },
        ],
        series: [
            {
                name: "2021-用电",
                type: "bar",
                data: [2.0, 4.9, 3.3, 3.1, 3.5, 4.6, 5.6],
                barWidth: "20%", //柱形图宽度
                itemStyle: {
                    color: "#49855f", //柱形图颜色
                },
            },
            {
                name: "2022-用电",
                type: "bar",
                barWidth: "20%", //柱形图宽度
                data: [2.6, 5.9, 6.0, 2.3, 4.5, 4.8, 5.0],
                itemStyle: {
                    color: "#5c4b8c", //柱形图颜色
                },
            },
            {
                name: "2021-同比",
                type: "line",
                symbol: "circle",
                data: [8.0, 8.2, 9.3, 8.5, 8.3, 9.2],
                itemStyle: {
                    normal: {
                        borderColor: "#ecae15",
                        color: "#ecae15",
                        label: {
                            show: true,
                            position: 'top',
                            color: '#ecae15',
                            formatter: function (data) {
                                return data.value + '%';
                            }
                        },
                    },
                },
            },

            {
                name: "2022-环比",
                type: "line",
                symbol: "circle",
                data: [7.0, 7.2, 7.3, 7.5, 7.3, 7.2],
                itemStyle: {
                    normal: {
                        borderColor: "#8146ff",
                        color: "#8146ff",
                        label: {
                            show: true,
                            position: 'bottom',
                            color: '#8146ff',
                            formatter: function (data) {
                                return data.value + '%';
                            }
                        },
                    },

                },
            },
        ],

        textStyle: {
            color: "#fff",
            fontSize: 12,
        },
    });
});
</script>

<template>
    <div class="column">
        <div id="main"></div>
    </div>
</template>

<style lang="less" scoped>
.column {
    width: 100%;
    height: 100%;

    #main {
        width: 100%;
        height: 100%;
    }
}
</style>
